<!-- 上拉选择组件，含取消按钮 -->
<template>
  <div class="m-actionsheet" v-if="show" @touchmove.stop="preventD" @click="hideDialog">
    <div class="m-actionsheet-container">
      <div class="item" v-for="(item, i) in listData" :key="i" :class="{ 'last': i === listData.length - 1}">
        <button :open-type="item.type" @click="onItemClick(i)">{{item.text}}</button>
      </div>
      <div class="cancel" @click="hideDialog">取消</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    listData: {
      type: Array,
      default: []
    }
  },
  watch: {
    show (val) {
      val ? this.$emit('onShow') : this.$emit('onHide')
    }
  },
  methods: {
    preventD () {},
    hideDialog () {
      this.$emit('update:show', false)
    },
    onItemClick (i) {
      this.$emit('select', i)
    }
  }
}
</script>

<style lang="less" scoped>
.m-actionsheet {
  z-index: 200;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: rgba(0, 0, 0, .5);
  &-container {
    width: 100%;
    text-align: center;
    background-color: #f0f0f0;
    line-height: 100rpx;
    .item {
      background-color: #fff;
      border-bottom: 1rpx solid #e6ebf0;
      &.last {
        border-bottom: none;
      }
      &:active {
        background: #d8d8d8;
      }
      button {
        border: none;
        background-color: transparent;
        font-size: 30rpx;
        color: #333;
        line-height: 100rpx;
        &::after {
          display: none;
        }
      }
    }
    .cancel {
      font-size: 30rpx;
      color: #333;
      margin-top: 10rpx;
      background-color: #fff;
    }
  }
}
</style>
